<template>
	<div class="sec-top">
		<button class="btn btn-sm btn-primary" @click = "newProduct({type: 0},'新增')">新增版块</button>
	</div>
	<table class="table table-bordered">
		<caption>首页产品展示版块列表</caption>
		<thead>
			<tr>
				<th>板块名称</th>
        <th>类别</th>
        <th colspan="2">板块信息</th>
        <th>子类</th>
        <th>排序</th>
				<th></th>
			</tr>
		</thead>
		<tbody>
      <template v-for="item in cList">
  			<tr>
  				<td rowspan="3">{{item.name}}</td>
  				<td rowspan="3">{{item.type | productType}}</td>
          <td class="text-right">内容1</td>
  				<td>{{item.data1}}</td>
  				<td rowspan="3">
            <table class="table table-bordered">
              <thead>
                <tr>
                  <th class="col-xs-2">名称</th>
                  <th class="col-xs-1">项数</th>
                  <th class="col-xs-5">
                     <button class="btn btn-sm btn-primary" @click="newClassify(item.sectionId,{}, '新增')">新增</button>
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="it in item.classifyList">
                  <td>{{it.name}}</td>
                  <td>{{it.showCount}}</td>
                  <td>
                    <button class="btn btn-sm btn-primary" @click="toChild(it.classifyId)">查看子项</button>
                    <button class="btn btn-sm btn-primary" @click="newClassify(item.sectionId,it, '修改')">修改</button>
                    <button class="btn btn-sm btn-danger" @click="deleteClassify(it.classifyId)">删除</button>

                    <button class="btn btn-sm btn-success" v-if=" $index > 0 " @click="classfySwap(it.classifyId, item.classifyList[$index - 1].classifyId)">上移</button>
                    <button class="btn btn-sm btn-success" v-if=" $index < item.classifyList.length - 1" @click="classfySwap(it.classifyId, item.classifyList[$index + 1].classifyId)">下移</button>
                    <button class="btn btn-sm" v-if=" $index >= item.classifyList.length - 1 " :style="{ opacity: 0, 'pointer-events': 'none' }">占位</button>
                  </td>
                </tr>
              </tbody>
            </table>
          </td>
          <td rowspan="3" class="text-right col-nowrap">
            <button class="btn btn-sm btn-success" v-if=" $index > 0 " @click="swap(item.sectionId, cList[$index - 1].sectionId)">上移</button>
            <button class="btn btn-sm btn-success" v-if=" $index < cList.length - 1" @click="swap(item.sectionId, cList[$index + 1].sectionId)">下移</button>
            <button class="btn btn-sm" v-if=" $index >= cList.length - 1 " :style="{ opacity: 0, 'pointer-events': 'none' }">占位</button>
          </td>
  				<td rowspan="3" class="text-right col-nowrap">
            <button class="btn btn-sm btn-primary" @click="newProduct(item,'修改')">修改</button>
            <button class="btn btn-sm btn-danger" @click="deleteSection(item.sectionId)">删除</button>
  				</td>
  			</tr>
        <tr>
          <td class="text-right">内容2</td>
          <td>{{item.data2}}</td>
        </tr>
        <tr>
          <td class="text-right">配图</td>
          <td><img class="list-pic" :src="item.picUrl"></td>
        </tr>
      </template>
		</tbody>
	</table>
  <product-new :show-new.sync="showNew" :it="it" :title= "title"></product-new>
  <classify-new :show-classify-new.sync="showClassifyNew" :classify-it="classifyIt" :title="classifyTitle"></classify-new>
</template>
<style src="./product-list.css" scoped></style>
<script type="text/javascript" src="./product-list.js"></script>
